@import '../_config.scss';

.menu-carousel {
  .menu-bar {
    background-color: #f3f3f3;
    height: 40px;

    .content {
      position: relative;
      height: 100%;

      .category-menu {
        padding: 10px 15px;
        height: 100%;
        background-color: $color-private;
        color: $color-default;
        z-index: 1001;
        cursor: pointer;

        .lv1-menu {
          background-color: rgba(55, 52, 55, 0.8);
          list-style-type: none;
          margin: 10px -15px 0;
          padding: 0;
          height: 450px;
          display: none;

          > li {
            padding: 10px 15px;
            cursor: pointer;
            &.sub {
              margin-left: 20px;
            }

            > i {
              line-height: inherit;
            }

            > a{
              color: #fff;
            }

            &,
            & > i {
              font-size: 15px;
            }

            > .lv2-menu {
              display: none;
              margin: 0;
              padding: 0;
              list-style-type: none;
              background-color: rgba(55, 52, 55, 0.8);
              position: absolute;
              top: 40px;
              left: 100%;
              width: 350%;
              height: 450px;
              z-index: 1001;

              >a{
                display: inline-block;
                margin: 10px 0;
                padding: 0px 15px;
                color: $color-default;

                &:not(:last-child){
                  border-right: 1px solid #fff;
                }

                &:hover{
                  color: $color-private;
                }
              }
            }

            &:hover {
              color: $color-private;
              > a{
                color: $color-private;
              }
              .lv2-menu{
                display: inherit;
              }
            }
          }
        }

        .lv1-menu.active{
          display: inherit;
        }

        &:hover{
          .lv1-menu{
            display: inherit;
          }
        }
      }

      .bar-menu{
        a{
          display: inline-block;
          font-size: 15px;
          padding: 10px 15px;
          color: $color-title;

          &:hover{
            color: $color-private;
          }
        }
      }
    }

    &.not-home{
      background-color: #51db89;
      .bar-menu{
        a{
          display: inline-block;
          color: $color-default;

          &:hover{
            color: $color-default;
          }
        }
      }
    }
  }

  .home-carousel-menu{
    height: 450px;
    width: 100%;
    background-color: $color-bg;
  }
}
